import React from 'react';
import {connect} from 'dva';
import {Row, Col, Form, InputNumber, Select, Input} from 'antd';

const R = require('ramda');
import BizParams from '../../../components/commons/BizParams'
import CurrencySelect from '../../../components/commons/CurrencySelect';
import validator from '../../../utils/Validator'

const FormItem = Form.Item;
export default connect(({declaration}) => ({declaration}))(
    Form.create({wrappedComponentRef: true})(class TradeInfo extends React.Component {
        constructor(props) {
            super(props);
            this.initData(props.dataSource, true);
        }

        componentWillReceiveProps(nextProps) {
            if (!R.equals(this.props.dataSource)(nextProps.dataSource)) {
                this.initData(nextProps.dataSource);
            }
        }

        initData = (dataSource, flag) => {
            dataSource = R.isNil(dataSource) ? {} : dataSource;
            let defaultShowPremium = !R.isEmpty(dataSource) && (dataSource.priceclause + "" === "1" || dataSource.priceclause + "" === "4");
            let defaultShowFreight = !R.isEmpty(dataSource) && (dataSource.priceclause + "" === "1" || dataSource.priceclause + "" === "2");
            let stateObj = {
                showFreight: defaultShowFreight,
                defaultShowFreight: defaultShowFreight,
                showPremium: defaultShowPremium,
                defaultShowPremium: defaultShowPremium,
            }
            if (flag) {
                this.state = {
                    showFreight: defaultShowFreight,
                    defaultShowFreight: defaultShowFreight,
                    showPremium: defaultShowPremium,
                    defaultShowPremium: defaultShowPremium,
                };
            } else {
                this.setState({
                    showFreight: defaultShowFreight,
                    defaultShowFreight: defaultShowFreight,
                    showPremium: defaultShowPremium,
                    defaultShowPremium: defaultShowPremium,
                })
            }
        }

        form = {};

        handleCollectForm = () => {
            return this.form;
        }
        
        handleResetFields = () => {
            this.setState({showFreight: this.state.defaultShowFreight, showPremium: this.state.defaultShowPremium});
            this.props.form.resetFields();
        }

        handleChangePriceClause = (value) => {
            if (value === "1") {
                this.setState({showPremium: true});
                this.setState({showFreight: true});
            }
            if (value === "2") {
                this.props.form.setFieldsValue({premium: 0, premiumcurrency: ""});
                this.setState({showPremium: false});
                this.setState({showFreight: true});
            }
            if (value === "4") {
                this.props.form.setFieldsValue({freight: 0, freightcurrency: ""});
                this.setState({showPremium: true});
                this.setState({showFreight: false});
            }
            if (value !== "1" && value !== "2" && value !== "4") {
                //不是CIF，先清理保费
                this.props.form.setFieldsValue({freight: 0, freightcurrency: ""});
                //不是C&F，再清理运费
                this.props.form.setFieldsValue({premium: 0, premiumcurrency: ""});
                this.setState({showFreight: false});
                this.setState({showPremium: false});
            }
        };

        checkTradeInfo = () => {
            let flag = true;
            this.props.form.validateFields({force: true}, (errors, values) => {
                if (errors) {
                    flag = false
                } else {
                    this.form = values;
                }
            })

            return flag;
        };

        render() {
            const {getFieldDecorator} = this.props.form;
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
            let formItemLayout = {
                labelCol: {xs: {span: 24}, sm: {span: 7}},
                wrapperCol: {xs: {span: 24}, sm: {span: 14}}
            };

            let formItemLayout2 = {
                labelCol: {xs: {span: 21}, sm: {span: 4}},
                wrapperCol: {xs: {span: 21}, sm: {span: 14}}
            };
            let buyerList = R.isNil(this.props.buyerList) ? [] : this.props.buyerList;
            buyerList = this.props.disabled ? buyerList : R.filter(buyer => buyer.status === "1", buyerList);
            let declarationList = this.props.declaration && this.props.declaration.declarationList ? this.props.declaration.declarationList : [];
            let disabledDeclarationstyles = [];
            let customer = R.isNil(this.props.customer) ? {} : this.props.customer;
            if (customer.csttype === "2") disabledDeclarationstyles[0] = "1"; //外综跟会员客户不能选择本公司抬头
            return (
                <Form>
                    <Row>
                        {customer.businessType === "2" ?
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="报关抬头" hasFeedback>
                                    {getFieldDecorator('privateCstId', {
                                        rules: [{
                                            required: true, message: '请选择报关抬头'
                                        }],
                                        initialValue: dataSource.privateCstId ? dataSource.privateCstId+"" : undefined
                                    })(
                                        <Select disabled={this.props.disabled} style={{width: '100%'}} showSearch
                                                placeholder="可通过输入关键字搜索"
                                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                                            {
                                                declarationList.map(item => {
                                                    return (<Select.Option value={item.id+ ""} key={item.id+ ""}>{item.name}</Select.Option>);
                                                })
                                            }
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                            :
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="报关类型" hasFeedback>
                                    {getFieldDecorator('declarationstyle', {
                                        rules: [{
                                            required: true, message: '请选择报关类型'
                                        }],
                                        initialValue: dataSource.declarationstyle
                                    })(
                                        <BizParams sprCode='declarationstyle' disabledKeys={disabledDeclarationstyles}
                                                   disabled={this.props.disabled} placeholder="自营外综差别巨大，请谨慎"/>
                                    )}
                                </FormItem>
                            </Col>
                        }

                        <Col span={12}>
                            <FormItem {...formItemLayout} label="收汇方式" hasFeedback>
                                {getFieldDecorator('settlementmethod', {
                                    rules: [{
                                        required: true, message: '请选择收汇方式'
                                    }],
                                    initialValue: dataSource.settlementmethod
                                })(
                                    <BizParams sprCode='settlement' disabled={this.props.disabled}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="出口目的国" hasFeedback>
                                {getFieldDecorator('countrycd', {
                                    rules: [{
                                        required: true, message: '请选择出口目的国'
                                    }],
                                    initialValue: dataSource.countrycd
                                })(
                                    <BizParams sprCode='country' disabled={this.props.disabled}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="贸易国地区" hasFeedback>
                                {getFieldDecorator('tradecountry', {
                                    rules: [{
                                        required: true, message: '请选择贸易国地区'
                                    }],
                                    initialValue: dataSource.tradecountry
                                })(
                                    <BizParams sprCode='country' disabled={this.props.disabled}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="指运港" hasFeedback>
                                {getFieldDecorator('portofdest', {
                                    rules: [{
                                        required: true, message: '请选择指运港'
                                    }],
                                    initialValue: (R.isNil(dataSource.portofdest) || R.isEmpty(dataSource.portofdest)) ? undefined : dataSource.portofdest + ""
                                })(
                                    <BizParams sprCode='portOfDest' disabled={this.props.disabled}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="境外买家" hasFeedback>
                                {getFieldDecorator('buyid', {
                                    rules: [{
                                        required: true, message: '请选择境外买家'
                                    }],
                                    initialValue: (R.isNil(dataSource.buyid) || R.isEmpty(dataSource.buyid)) ? undefined : dataSource.buyid + ""
                                })(
                                    <Select style={{width: '100%'}} disabled={this.props.disabled} showSearch
                                            placeholder="可通过输入关键字搜索"
                                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                                        {
                                            !R.isNil(buyerList) ? buyerList.map(item => {
                                                return (<Select.Option value={item.id + ""}
                                                                       key={item.id + ""}>{item.name}</Select.Option>);
                                            }) : ''
                                        }
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="监管方式" hasFeedback>
                                {getFieldDecorator('supervision', {
                                    rules: [{
                                        required: true, message: '请选择监管方式'
                                    }],
                                    initialValue: dataSource.supervision
                                })(
                                    <BizParams disabled={this.props.disabled} sprCode='supervision'/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="征免性质" hasFeedback>
                                {getFieldDecorator('natureexemption', {
                                    rules: [{
                                        required: true, message: '请选择征免性质'
                                    }],
                                    initialValue: dataSource.natureexemption
                                })(
                                    <BizParams disabled={this.props.disabled} sprCode='natureExemption'/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="价格条款" hasFeedback>
                                {getFieldDecorator('priceclause', {
                                    rules: [{
                                        required: true, message: '请选择价格条款'
                                    }],
                                    initialValue: dataSource.priceclause
                                })(
                                    <BizParams sprCode='priceItem' disabled={this.props.disabled}
                                               onChange={this.handleChangePriceClause.bind(this)}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}
                             style={{display: this.props.form.getFieldValue('declarationstyle') === '2' ? "inline-block" : "none"}}>
                            <FormItem {...formItemLayout} label="外综发票" hasFeedback>
                                {getFieldDecorator('tax', {
                                    rules: [{
                                        required: this.props.form.getFieldValue('declarationstyle') === '2',
                                        message: '请选择是否需要外综发票'
                                    }],
                                    initialValue: dataSource.tax
                                })(
                                    <Select disabled={this.props.disabled}>
                                        <Select.Option value="1">需要</Select.Option>
                                        <Select.Option value="2">不需要</Select.Option>
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12} style={{display: this.state.showFreight ? "inline-block" : "none"}}>
                            <FormItem {...formItemLayout} label="运费" hasFeedback>
                                {getFieldDecorator('freight', {
                                    rules: [{
                                        required: this.state.showFreight,
                                        message: '请输入运费',
                                        pattern: this.state.showFreight ? validator.DECIMAL4.pattern : validator.NUMBER,
                                        message: validator.DECIMAL4.message,
                                    }],
                                    initialValue: dataSource.freight
                                })(
                                    <InputNumber style={{width: "100%"}} disabled={this.props.disabled} min={0}
                                                 max={99999999999999}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12} style={{display: this.state.showFreight ? "inline-block" : "none"}}>
                            <FormItem {...formItemLayout} label="运费币种" hasFeedback>
                                {getFieldDecorator('freightcurrency', {
                                    rules: [{
                                        required: this.state.showFreight, message: '请输入运费币种'
                                    }],
                                    initialValue: R.isEmpty(dataSource.freightcurrency) || R.isNil(dataSource.freightcurrency) ? undefined : dataSource.freightcurrency
                                })(
                                    <CurrencySelect disabled={this.props.disabled}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12} style={{display: this.state.showPremium ? "inline-block" : "none"}}>
                            <FormItem {...formItemLayout} label="保费" hasFeedback>
                                {getFieldDecorator('premium', {
                                    rules: [{
                                        required: this.state.showPremium,
                                        message: '请输入保费',
                                        pattern: this.state.showPremium ? validator.DECIMAL4.pattern : validator.NUMBER,
                                        message: validator.DECIMAL4.message,
                                    }],
                                    initialValue: dataSource.premium
                                })(
                                    <InputNumber style={{width: "100%"}} disabled={this.props.disabled} min={0}
                                                 max={99999999999999}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12} style={{display: this.state.showPremium ? "inline-block" : "none"}}>
                            <FormItem {...formItemLayout} label="保费币种" hasFeedback>
                                {getFieldDecorator('premiumcurrency', {
                                    rules: [{
                                        required: this.state.showPremium, message: '请输入保费币种'
                                    }],
                                    initialValue: R.isEmpty(dataSource.premiumcurrency) || R.isNil(dataSource.premiumcurrency) ? undefined : dataSource.premiumcurrency
                                })(
                                    <CurrencySelect disabled={this.props.disabled}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="境外收货人" hasFeedback>
                                {getFieldDecorator('consignee', {
                                    rules: [{
                                        required: true, message: '请输入境外收货人'
                                    }],
                                    initialValue: dataSource.consignee
                                })(
                                    <Input maxLength="255" disabled={this.props.disabled}/>
                                )}
                            </FormItem>
                        </Col>
                        {customer.businessType === "2" ?
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="运输方式" hasFeedback>
                                    {getFieldDecorator('transporttype', {
                                        rules: [{
                                            required: true, message: '请选择运输方式'
                                        }],
                                        initialValue: R.isNil(dataSource.transporttype) ? undefined : dataSource.transporttype
                                    })(
                                        <BizParams sprCode='transportType' disabled={this.props.disabled}/>
                                    )}
                                </FormItem>
                            </Col>
                            :
                            ""
                        }
                    </Row>
                    <Row>
                        <Col span={21}>
                            <FormItem {...formItemLayout2} label="出口享惠情况" hasFeedback>
                                {getFieldDecorator('exportbenefits', {
                                    rules: [{
                                        required: true, message: '请选择出口享惠情况'
                                    }],
                                    initialValue: dataSource.exportbenefits
                                })(
                                    <BizParams sprCode='benefitsItem' disabled={this.props.disabled}
                                               style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            )
        }
    })
)

// WEBPACK FOOTER //
// ./public/src/components/order/components/TradeInfo.js